var sw = 20,//方块的宽
	sh = 20,//方块的高
	tr = 30,//行数
	td = 30;//列数

var snake = {},
	food = {};
var game = {};


//方块构造函数
function Square(x,y,classname){
	this.x = x*sw; //x,y传入坐标 this.x,this.y方块真实位置
	this.y = y*sh;
	this.class = classname;

	this.viewContent = document.createElement('div');
	this.viewContent.className = this.class;
	this.parent = document.getElementById('snakeWrap'); 
}
Square.prototype.create = function(){//创建方块DOM，并添加到页面里
	this.viewContent.style.position = 'absolute';
	this.viewContent.style.width = sw+'px';
	this.viewContent.style.height = sh+'px';
	this.viewContent.style.left = this.x+'px';
	this.viewContent.style.top = this.y+'px';

	this.parent.appendChild(this.viewContent);
}
Square.prototype.remove=function(){
	// 移除方块
	this.parent.removeChild(this.viewContent);
}
//蛇
function Snake(){
	this.head = null;//存储蛇头信息
	this.tail = null;//存蛇尾信息
	this.pos = [];//存储蛇身上的每一个方块的信息
	this.directionNum = {//存储蛇走的方向，用一个对象来表示
		left:{
			x:-1,
			y:0
		},
		right:{
			x:1,
			y:0
		},
		up:{
			x:0,
			y:-1
		},
		down:{
			x:0,
			y:1
		}

	}
}
Snake.prototype.init = function(){
	//创建蛇头
	var snakeHead = new Square(2,0,'snakeHead');
	snakeHead.create();
	this.head = snakeHead; //存储蛇头信息

	this.pos.push([2,0]);//把蛇头的位置存起来
	//创建蛇的身体
	var snakeBody1 = new Square(1,0,'snakeBody');
	snakeBody1.create();
	this.pos.push([1,0]);

	var snakeBody2 = new Square(0,0,'snakeBody');
	snakeBody2.create();
	this.tail = snakeBody2;
	this.pos.push([0,0]);

	//链表关系
	snakeHead.last = null;
	snakeHead.next = snakeBody1;

	snakeBody1.last = snakeHead;
	snakeBody1.next = snakeBody2;

	snakeBody2.last = snakeBody1;
	snakeBody2.next = null;

	//给蛇添加一条属性，表示蛇走的方向
	this.direction = this.directionNum.right;
	
}

//这个方法用来获取蛇头的下一个位置对印的元素，根据元素来做不同的事
Snake.prototype.getNextPos=function(){
	var nextPos = [//蛇头要走的下一个坐标点
		this.head.x/sw + this.direction.x,
		this.head.y/sh + this.direction.y
	]
	//下一个点是自己，游戏结束
	var selfCollied = false;
	this.pos.forEach(function(value){
		if(value[0]==nextPos[0]&&value[1]==nextPos[1]){
			selfCollied = true;
		}
	});
	if(selfCollied){
		console.log('撞到了自己');
		this.Strategies.die.call(this);
		return;
	}
	//下一个点是围墙
	if(nextPos[0]<0 || nextPos[0]>tr-1 || nextPos[1]<0 || nextPos[1]>td-1){
		console.log('撞墙了');
		this.Strategies.die.call(this);
		return;
	}

	//下一个是食物，吃
	if(food && food.pos[0]==nextPos[0] && food.pos[1]==nextPos[1]){
		// alert('ok');
		this.Strategies.eat.call(this);
		game.score++;
		createFood();
		return;

	}
	


	//下一个什么都不是，走
	this.Strategies.move.call(this);
}
//处理碰撞
Snake.prototype.Strategies={
	move:function(fament){
		//创建创建新身体，（在旧的蛇头的位置）
		var newBody = new Square(this.head.x/sw,this.head.y/sh,'snakeBody');
		//更新链表关系
		newBody.next = this.head.next;
		newBody.next.last = newBody;
		newBody.last = null;

		this.head.remove();//把旧蛇头从原来的位置删除
		newBody.create();
		//创建新蛇头在下一个碰撞点
		var newHead = new Square(this.head.x/sw + this.direction.x,this.head.y/sh + this.direction.y,'snakeHead');
		//更新链表关系
		newHead.next = newBody;
		newHead.last = null;
		newBody.last = newHead;
		
		//蛇身上的每一个方块的坐标也要更新
		this.pos.splice(0,0,[this.head.x/sw + this.direction.x,this.head.y/sh + this.direction.y])
		//从数组第0位，替换0个，插入【】
		this.head = newHead;//更新this.head的信息
		newHead.create();
		if(!fament){//如果fament的值为false，表示需要删除蛇尾，没有传值为undefined也就是false
			this.tail.remove();
			this.tail = this.tail.last;
			this.pos.pop();//删除数组最后一位


		}

	},
	eat:function(){
		this.Strategies.move.call(this,true);
	},
	die:function(){
		game.over();
		console.log('die');
		console.log(this);
	}

}
snake = new Snake();
//创建食物
function createFood(){
	//食物小方块的随机坐标
	var x = null;
	var y = null;

	var include = true;//判断食物是否在蛇的身上若在true循环，若不在跳出循环
	while(include){
		x = Math.round(Math.random()*(tr-1));
		y = Math.round(Math.random()*(td-1));
		snake.pos.forEach(function(value){
			if(x!=value[0]&&y!=value[1]){
				include = false;
			}
		});

	}

	food = new Square(x,y,'food');
	food.pos = [x,y];
	var foodDom = document.querySelector('.food');
	if(foodDom){
		foodDom.style.left = x*sw+'px';
		foodDom.style.top = y*sh+'px';
	}else{
		food.create();
	}
	
}

function Game(){
	this.timer = null;
	this.score = 0;
}

Game.prototype.init = function(){
	snake.init();
	createFood();

	document.onkeydown = function(ev){
		if(ev.which == 37&&snake.direction!=snake.directionNum.right){
				snake.direction = snake.directionNum.left;
		}else if(ev.which==38 && snake.direction!=snake.directionNum.down){
			snake.direction = snake.directionNum.up;

		}else if(ev.which==39 && snake.direction!=snake.directionNum.left){
			snake.direction = snake.directionNum.right;
		}else if(ev.which==40 && snake.direction!=snake.directionNum.up){
			snake.direction = snake.directionNum.down;
		}
	}
	this.start();

}
Game.prototype.start = function(){
	this.timer = setInterval(function(){
		snake.getNextPos();
	},200);
}
Game.prototype.pause = function(){
	clearInterval(this.timer);
}
Game.prototype.over = function(){
	clearInterval(this.timer);
	alert('游戏结束！你的得分为'+game.score);
	//游戏回到初始状态
	var snakeWrap = document.getElementById('snakeWrap');
	snakeWrap.innerHTML = '';
	 snake = new Snake();
	 game = new Game();

	 var startBtnWrap = document.querySelector('.startBtn');
	 startBtnWrap.style.display = 'block';
}
//开始游戏
game = new Game();
var startBtn = document.querySelector('.startBtn button');
startBtn.onclick = function(){
	startBtn.parentNode.style.display = 'none';
	game.init();
}

//暂停游戏
var snakeWrap = document.getElementById('snakeWrap');
var pauseBtn = document.querySelector('.pauseBtn button');
snakeWrap.onclick = function(){
	game.pause();
	
	pauseBtn.parentNode.style.display = 'block';

}

pauseBtn.onclick = function(){
	game.start();
	pauseBtn.parentNode.style.display = 'none';
}